<template>
  <div class="page-filedata">
    <strong class="filedata-tip">
      已选路径:
      <span
        class="tip-span"
        v-for="(item,index) of fileList"
        :key="index"
        @click="filePathClick(item,index)"
      >{{item}}</span>
    </strong>

    <div class="filedata-btns">
      <Button size="small" style="float:right" @click="goHome">返回根目录</Button>
      <span class="upload-wrapper">
        <input @change="fileChange($event)" name="files" type="file">
        <Button size="small" @click="goHome" v-show="showUpload">上传文件</Button>
      </span>
    </div>

    <div class="file-table">
      <Table size="small" :columns="dataColumns" :data="tableData" height="340">
        <template slot-scope="{ row }" slot="name">
          <p>
            <a
              class="lan file"
              @click="fileChildren(row.fullFileName,row.directory)"
              v-if="row.directory"
            >
              <Icon style="margin-right: 5px;" type="ios-folder"/>
              <span class="overflow" :title="row.name">{{row.name}}</span>
            </a>
            <span
              v-else
              @click="fileChildren(row.fullFileName)"
              :class="['overflow', 'last-file',{'active':currentFilePath===row.fullFileName}]"
              :title="row.name"
            >{{row.name}}</span>
          </p>
        </template>
        <template slot-scope="{ row }" slot="dataSize">{{row.dataSize}}</template>
      </Table>
      <Page
        style="float:left"
        :total="total"
        size="small"
        v-if="total > 100"
        :current="pageIndex"
        @on-change="changePage"
      />
    </div>
    <div class="filedata-footer">
      <Button @click="cancelHandler" style="margin-right:8px">取消</Button>
      <Button type="primary" @click="okHandler">确定</Button>
    </div>
  </div>
</template>

<script>
import { wfCode } from 'assets/scripts/code';
import { getDirFilesInfo, uploadFile } from 'http/api/workflow';

export default {
  props: ['filePath'],
  watch: {
    currentFilePath () {
      if (this.currentFilePath) {
        this.setPath();
        // this.uploadData.currentDir = this.currentFilePath;
      }
    }
  },
  data () {
    return {
      currentFilePath: '/',
      fileList: [],
      tableData: [],
      total: 0,
      pageIndex: 1,
      dataColumns: [
        {
          title: '文件名',
          slot: 'name'
        },
        {
          title: '文件大小',
          slot: 'dataSize'
        }
      ],
      showUpload: false,
      firstFilePath: ''
    };
  },
  methods: {
    // 文件上传
    fileChange (e) {
      let file = e.target.files[0];
      let { size } = file;

      if (size > 214748364800) {
        this.$Message.error('上传文件过大');
        return;
      }

      let param = new FormData();
      param.append('isCreateFolder', false);
      param.append('currentDir', this.currentFilePath);
      param.append('createFolderName', '');
      param.append('file', file);

      uploadFile(param).then(res => {
        if (res) {
          this.getDataList('上传成功');
        }
      });
    },

    // 返回根目录
    goHome () {
      this.currentFilePath = '/';
      this.showUpload = true;
      this.getDataList();
    },

    // 获取文件信息
    getDataList (msg) {
      getDirFilesInfo({
        currentDir: this.firstFilePath
          ? this.firstFilePath
          : this.currentFilePath || '/',
        currentPage: this.pageIndex,
        pageSize: 500,
        keyWord: ''
      }).then(res => {
        if (res) {
          let { total, fileAttributes } = res;
          this.total = total;
          this.tableData = fileAttributes;
          this.firstFilePath = '';

          if (msg) {
            this.$Message.success(msg);
          }
        }
      });
    },

    // 文件选择
    fileChildren (url, directory) {
      this.currentFilePath = url;

      if (directory) {
        this.getDataList();
      }

      this.showUpload = !!directory;
    },

    // 路径设置
    setPath () {
      if (this.currentFilePath.includes(wfCode.DVPath)) {
        this.currentFilePath = this.currentFilePath.substr(
          wfCode.DVPath.length
        );
      }
      let currentFilePath = this.currentFilePath;
      try {
        currentFilePath = currentFilePath.replace(/\\/g, '/');
        this.fileList = currentFilePath
          .substring(currentFilePath.indexOf('/') + 1)
          .split('/');
      } catch (err) {
        this.$Message.error('路径格式错误');
      }
    },

    // 改变分页
    changePage (page) {
      this.pageIndex = page;
      this.getDataList();
    },

    // 确定
    okHandler () {
      if (!this.currentFilePath) {
        this.$Message.error('请选择文件数据');
        return;
      }
      this.$emit(
        'okHandler',
        this.currentFilePath.includes(wfCode.DVPath)
          ? this.currentFilePath
          : wfCode.DVPath + this.currentFilePath
      );
    },

    // 取消
    cancelHandler () {
      this.$emit('cancelHandler');
    },

    // 路径点击
    filePathClick (item, index) {
      // 如果点击的是最后一个，则不动
      if (index !== this.fileList.length - 1) {
        let file = [];
        this.fileList.forEach((unit, order) => {
          if (order <= index) {
            file.push(unit);
          }
        });

        this.currentFilePath = '/' + file.join('/');
        this.getDataList();
      }
    }
  },
  mounted () {
    if (this.filePath) {
      this.currentFilePath = this.filePath;
      this.setPath();
    }

    // 初始化的时候，回退一个目录
    if (this.currentFilePath) {
      let lastIndex = this.currentFilePath.lastIndexOf('/');
      this.firstFilePath = this.currentFilePath.substring(0, lastIndex);
      this.firstFilePath = this.firstFilePath ? this.firstFilePath : '/'
    }
    this.getDataList();
  }
};
</script>

<style rel="stylesheet/less" lang="less">
@import "../../../assets/theme/themeBlue.less";
.page-filedata {
  height: 450px;
  overflow-x: hidden;
  overflow-y: auto;
  .filedata-tip {
    display: block;
    .tip-span {
      position: relative;
      cursor: pointer;
      padding-left: 8px;
      &:hover {
        color: @primary;
      }
      &:before {
        position: absolute;
        content: "/";
        left: 2px;
      }
    }
  }
  .filedata-footer {
    clear: both;
    text-align: right;
  }
  .file-table {
    clear: both;
    margin-bottom: 10px;
    .file-table-input {
      width: 200px;
      margin-bottom: 10px;
    }
    .ivu-page {
      margin-top: 10px;
      text-align: center;
    }
    .ivu-table-row {
      cursor: pointer;
    }
    .overflow {
      max-width: 270px;
      display: inline-block;
      vertical-align: middle;
    }
    .last-file {
      &:hover,
      &.active {
        color: @primary;
      }
    }
  }
}
.file-table .ivu-table-small td {
  padding: 0;
  height: 30px;
}
.filedata-btns {
  margin-bottom: 6px;
  overflow: hidden;
}
.upload-wrapper {
  float: right;
  position: relative;
  width: 64px;
  height: 24px;
  overflow: hidden;
  margin-right: 10px;
  input,
  button {
    position: absolute;
    left: 0;
    top: 0;
  }
  input {
    z-index: 999;
    opacity: 0;
  }
}
</style>
